<template>
  <header>
    <img src="@/assets/img/logo.png" alt="" />
    <HeaderSearch />
    <HeaderCart />
    <span v-if="user"
      >你好，请<router-link to="/login">登录</router-link> 免费<router-link
        to="/register"
        >注册</router-link
      ></span
    >
    <span v-else
      >欢迎您，{{ store.userInfo.username }}。
      <a href="#" @click="logout">退出登录</a></span
    >
  </header>
</template>

<script setup lang="ts">
import HeaderSearch from './HeaderSearch.vue'
import HeaderCart from './HeaderCart.vue'
import { computed } from 'vue'
import { useUserStore } from '@/stores'
const store = useUserStore()
const user = computed(() => store.userInfo.username === '')
function logout() {
  store.deleteUser()
}
</script>

<style scoped lang="less">
header {
  img {
    width: 300px;
    height: 130px;
    margin: 20px 20px 20px 100px;
  }
  span {
    margin-left: 20px;
  }
  a {
    text-decoration: none;
    color: red;
  }
}
</style>
